<template>
  <PanerForm :isShowBarDrawer="true" :caption="'编辑资源目录'">
    <template #body>
      <div class="d-row">
        <div class="d-form-group d-form-group-flex">
          <div class="d-form-label d-text-right">
            <label class="label-text">名称</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.name" class="d-form-input" type="text" />
          </div>
        </div>
        <div class="d-row">
          <div class="d-form-group d-form-group-flex d-col-xs-6">
            <div class="d-form-label d-text-right">
              <label class="label-text">路径</label>
            </div>
            <div class="d-form-el">
              <input v-model="state.path" class="d-form-input" type="text" />
            </div>
          </div>
          <div class="d-form-group d-form-group-flex d-col-xs-6">
            <div class="d-form-label d-text-right">
              <label class="label-text">资源路径</label>
            </div>
            <div class="d-form-el">
              <input v-model="sourcePath" class="d-form-input" type="text" readonly disabled />
            </div>
          </div>
        </div>
        <div class="d-form-group d-form-group-flex">
          <div class="d-form-label d-text-right">
            <label class="label-text">描述</label>
          </div>
          <div class="d-form-el">
            <textarea v-model="state.description" class="d-form-textarea"></textarea>
          </div>
        </div>
      </div>
      <div class="d-row">
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">状态</label>
          </div>
          <div class="d-form-el">
            <select v-model="state.status" class="d-form-select">
              <option v-for="item in statusList" :key="item.id" :value="item.id">{{ item.text }}</option>
            </select>
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">排序</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.order" class="d-form-input" type="text" placeholder="数值越大越靠前" />
          </div>
        </div>
      </div>
    </template>
    <template #bar-drawer>
      <button @click="handleSubmit" class="d-btn d-btn-primary" type="button">提交</button>
      <button v-if="!isEdit" @click="handleReset" class="d-btn d-btn-default" type="reset">重置</button>
      <a v-d-goback class="d-btn d-btn-default">返回</a>
    </template>
  </PanerForm>
</template>

<script>
import { PanerForm } from '@daelui/vdog/dist/pages.js'
import { Dialoger, FormCalendar } from '@daelui/vdog/dist/components.js'
import { zh as locale } from '@daelui/dogjs/dist/locale.js'
import Uploader from '@/components/uploader/uploader'
import poSer from '@/service/action/pool.action.js'
import productSer from '@/service/action/product.action'
import { state } from '@/service/stock/index.js'

export default {
  components: {
    PanerForm,
    FormCalendar,
    Dialoger,
    Uploader
  },

  data () {
    return {
      isEdit: false, // 是否是编辑模式
      // 表单数据
      state: {
        id: '',
        name: '',
        path: '',
        productId: '',
        type: '',
        data: '',
        description: '',
        status: 1,
        order: 1,
        updateTime: '',
        updateUser: '',
        createTime: '',
        createUser: ''
      },
      sourcePath: '',
      // 产品列表
      productList: [],
      // 状态列表
      statusList: state.statusList,
      // 数据源类型
      resourceTypeList: state.resourceTypeList,
      // 是否显示文件浏览器
      isShowFileBrowser: false
    }
  },

  watch: {
    state: {
      handler() {
        let path = this.state.path
        if (/\w/.test(path)) {
          path = String(path).trim()
          let rules = window.application.tigerlair.mode.rules || []
          let host = (rules.find(item => item.rule === 'host') || {}).url
          this.sourcePath = host + ('/pool/res/' + path).replace('//', '/') + '/文件名'
        } else {
          this.sourcePath = ''
        }
      },
      deep: true
    }
  },

  methods: {
    /**
     * @function 加载数据
    */
    loadItem (id) {
      poSer.queryItem({ id }).then(result => {
        let data = result.data || {}
        this.state = data
      })
    },

    /**
     * @function 提交
    */
    handleSubmit () {
      let defer = null
      delete this.state.createTime
      // 编辑
      if (this.isEdit) {
        defer = poSer.editItem(this.state)
      } else { // 添加
        defer = poSer.addItem(this.state)
      }
      defer.then(result => {
        if (result.success) {
          Dialoger.success(locale.action.success)
          // 添加则回到列表页
          if (!this.isEdit) {
            this.$router.push(this.getMicroRoute('/pool/list'))
          }
        } else {
          Dialoger.danger(locale.action.fail)
        }
      })
    },

    /**
     * @function 重置
    */
    handleReset () {

    },

    /**
     * @function 更新上传文件
    */
    handleChangeFile (files, e) {
      console.log(files)
      console.log(e)
    }
  },

  beforeMount () {
    let params = this.$route.params
    // 新建
    if (!params.id) {
      this.isEdit = false
    } else { // 编辑
      this.isEdit = true
      this.loadItem(params.id)
    }
  },

  mounted () {
    // 查询产品列表
    productSer.queryListAllOption().then(list => {
      this.productList = list
    })
  }
}
</script>

<style scoped>
.d-form-label {
  width: 90px;
}
.d-form-textarea {
  min-height: 120px;
}
</style>
